const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {

    entry: "./src/main.js",
    plugins: [ // plugins注意：这个单词都是小写的，这个配置专门写插件的地方
        new HtmlWebpackPlugin({
            template: "./public/index.html" // 表示以./public/index.html为打包模板，生成到打包后的文件夹里面
        })
    ],
    module: {
        rules: [ // 配置loader的加载规则
            {   // 配置css加载器
                test: /\.css$/i, // 表示匹配以.css结尾的文件
                /**
                 * css-loader: 让webpack能够处理css类型的文件
                 * style-loader：把css插入到DOM中
                 * 注意：一定要先执行css-loader再style-loader因此use数组中的书写顺不能变
                 * webpack执行代码的顺序是从上到下，“ 从右到左 ”。
                 */
                use: ["style-loader", "css-loader"] // 表示匹配到以.css结尾的文件后使用这两个loader来处理
            },
            { // 配置less加载器
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            { // 配置webpack处理图片功能，无需下载任何loader，因为webpack5提供了一个asset module技术来处理图片和字体图标
                // 当type的值为asset的时候
                // 大于8kb的图片，会直接打包进dist文件夹下
                // 小于8kb的图片，会直接转成base64t图片类型，打包进js中
                test: /\.(png|jpg|gif|jpeg)$/i,
                type: "asset"
            },
            { // 处理字体图标
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: "asset/resource", // 直接将字体图标文件打包进dist文件夹里面
                generator: {
                    // [name]: 表示获取到原文件的文件名
                    // [hash:6]: 表示生成一个6位数据的哈希值
                    // 哈希值：指的是由字母和数字随机生成的一串字符串
                    // [ext]: 表示获取到原文件的后缀名
                    filename: "font/[name].[hash:6][ext]"
                }
            },
            { // js语法降级处理
                test: /\.js$/,
                // 第三方依赖包都是一件做了语法降级处理的，
                // 因此我们配置降级处理的时候需要排除他们。
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    }
}
/****
 * html-webpack-plugin
 * 作用：1、打包的时候自动生成一个html页面到打包后的文件夹里面
 *       2、html会自动引入打包后的js文件
 * 
 * 总结插件的使用步骤 html-webpack-plugin
 * 1、下载 npm i html-webpack-plugin -D
 * 2、在webpack.config.js中添加配置
 *      配置代码入上所示
 * 3、进行打包，npm run build 
 * 4、打包成功后，就可以在dist文件夹自动生成了html文件并在html中引入打包后的js文件
 * 
 */